<template>
  <div class="titleMain">
    <div class="inner">
    <BackToPage :pageAddr="pageTo" class="iconBack"></BackToPage>
    <span >{{ titleName }}</span>
    </div>
  </div>
</template>

<script>
import BackToPage from "../components/BackToPage";

export default {
  name: "TopBar",
  props: {
    titleName: String,
    pageTo: String,
  },
  components: {
    BackToPage,
  },
  methods: {
    getMidIndex() {
      var midWidth = document.documentElement.clientWidth / 2;
      console.log(midWidth);
      const title = this.$refs.title;
      
      var titleWidth = window.getComputedStyle(title).width;
      console.log(titleWidth);

      
     
      return midWidth -  - titleWidth / 2;
    },
  },

  computed: {
    computedLeft: function () {
      return "0px 0px 0px " + this.getMidIndex();
    },
  },
};
</script>

<style lang="scss" scoped>
.titleMain {
  color: white;
  height: 50px;
  width: 100%;
  background-color: #64b587;
  display: flex;
  align-items: center;
  span {
    font-size: 16px;
    font-weight: bold;
  }
  .iconBack {
    margin-left: 20px;

  }

}
</style>